<template>
    <right-layout class="layout-wrap" :title="title" :visible.sync="show" @closeLayout="closeLayout">
        <el-form :model="ruleForm" :rules="rule" ref="form" label-width="160px" label-position="left" :disabled="disabled" class="elform">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="选项名：" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="选项值：" prop="valStr">
                        <el-input v-model.trim="ruleForm.valStr"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="级别：" prop="pTypeLevl">
                        <el-input-number size="medium" v-model="ruleForm.pTypeLevl" :min="0" :max="9999"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="所属分类：">
                        <p>{{ currentNode.name }}</p>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="KeyStr：" prop="keyString">
                        <el-input v-model="ruleForm.keyString"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="顺序：" prop="orderNum">
                        <el-input-number size="medium" v-model="ruleForm.orderNum" :min="0" :max="9999"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="描述：" prop="descr">
                        <el-input v-model="ruleForm.descr" type="textarea" :rows="4"></el-input>
                        <text-length v-model="ruleForm.descr" :length.sync="ruleForm.descr_l" :max="256"></text-length>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="状态：" prop="status">
                        <select-para :options="sysParaObj['SP_QUES_STATUS']" v-model="ruleForm.status" :label.sync="ruleForm.statusName">
                        </select-para>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="" prop="haveDefault">
                        <el-checkbox v-model="ruleForm.haveDefault" true-label="1" false-label="0">
                            默认</el-checkbox>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="设置级联选项：" prop="haveCasc">
                        <el-switch v-model="ruleForm.haveCasc" active-value="1" inactive-value="0"></el-switch>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <div v-if="ruleForm.haveCasc == '1'">
                    <div class="table-box2">
                        <div class="left">
                            <el-tree 
                                v-if="show"
                                node-key="id"
                                lazy
                                :props="defaultProps"
                                :load="getParaCasc"
                                @node-click="paraCascClick">
                            </el-tree>
                        </div>
                        <div class="right">
                            <el-table :data="tableData2" height="350">
                                <el-table-column prop="name" label="选项名" width="100" align="left"
                                    show-overflow-tooltip></el-table-column>
                                <el-table-column prop="valStr" label="选项值" width="100" align="left"
                                    show-overflow-tooltip></el-table-column>
                                <el-table-column prop="keyString" label="keyStr" min-width="100" align="left"
                                    show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column prop="pTypeName" label="分类" width="100" show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column label="操作" fixed="right" width="80">
                                    <template slot-scope="scope">
                                        <el-button type="text" @click="deleteParaCasc(scope.row, scope.$index)">删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </el-row>
        </el-form>
        <div slot="foot" v-if="!disabled">
            <div class="left">
                <el-button type="text" @click="closeLayout">关闭</el-button>
            </div>
            <el-button type="primary" :loading="loading" @click="submitFun">保存</el-button>
            <el-button type="primary" :loading="loading" @click="submitFun(false)" v-if="!ruleForm.id">保存并新建</el-button>
            <el-button type="default" @click="resetForm">重置</el-button>
        </div>
    </right-layout>
</template>

<script>
    import RightLayout from '@/components/common/comp/RightLayout';
    import textLength from '@/components/common/comp/textLength';
    import selectPara from '@/components/common/comp/selectPara';
    import { 
        savePara,
        editPara,
        queryParaDetail, 
        queryAppList, 
        queryParaClass, 
        queryParaListAll, 
        queryParaCascById 
    } from '../../service.js';
    import { commPara } from '@/mixins/mixins';
    export default {
        name: 'newPara', // 新增/修改 参数
        components: {
            RightLayout,
            textLength,
            selectPara,
        },
        props: {
            treeNode: { // 系统对象
                type: Object,
                default() {
                    return {}
                }
            },
            currentNode: { // 参数分类对象
                type: Object,
                default() {
                    return {}
                }
            }
        },
        mixins: [ commPara ],
        data() {
            var validate_descr = (rule, value, callback) => {
                if(this.ruleForm.descr_l > 256) {
                    callback(new Error());
                }else {
                    callback();
                }
            }
            return {
                sysParaObj: {
                    'SP_QUES_STATUS': []
                },
                show: false,
                disabled: false,
                title: '新增选项',
                tableData: { // 参数表格
                    columns: '',
                    orders: '',
                    pageSize: 5,
                    currentPage: 1,
                    total: 0,
                    columeData: []
                },
                tableData2: [],
                paraCasc: [],
                defaultProps: {
                    label: 'name',
                    isLeaf: 'leaf'
                },
                valStrFlag: '', // 接收当前的参数值  修改参数值时 若与修改后的参数值相等，则不验证参数值唯一性
                ruleForm: {
                    id: "",
                    name: '', // 参数名
                    valStr: '', // 参数值
                    pTypeLevl: 0, // 级别
                    orderNum: 0, // 显示顺序
                    paramType: '', // 参数分类
                    pTypeName: '', // 参数分类名称
                    keyString: '',
                    descr: '',
                    descr_l: 0,
                    status: '',
                    statusName: '',
                    haveCasc: '0', // 是否级联
                    haveDefault: '0', // 是否默认
                },
                rule: {
                    name: [
                        { required: true, message: '请输入参数名', trigger: 'change' },
                        { min: 0, max: 20, message: '长度限制20位', trigger: 'change' }
                    ],
                    valStr: [
                        { required: true, message: '请输入参数值', trigger: 'change' },
                        { min: 0, max: 40, message: '长度限制40位', trigger: 'change'},
                    ],
                    status: [
                        { required: true, message: '请选择状态', trigger: 'change' }, 
                    ],
                    keyString: [
                        { min: 0, max: 128, message: '长度限制128位', trigger: 'change'}, 
                    ],
                    descr: [
                        { validator: validate_descr, message: '长度限制256位', trigger: 'change' },
                    ]
                },
                loading: false, // 参数列表 加载状态
            }
        },
        methods: {
            showLayout() {
                this.title = "新增选项";
                this.ruleForm.id = "";
                this.show = true;
            },
            showEdit(row) {
                this.title = "编辑选项";
                this.ruleForm.id = row.id;
                this.queryDetail();
                this.show = true;
            },
            showDetail(row) {
                this.title = '选项明细';
                this.ruleForm.id = row.id;
                this.disabled = true;
                this.queryDetail();
                this.show = true;
            },
            closeLayout() {
                this.show = false;
                setTimeout(() => {
                    this.disabled = false;
                    this.ruleForm.id = '';
                    this.resetForm();
                }, 500)
            },
            resetForm() { // 重置
                if(!this.ruleForm.id) {
                    this.tableData2 = [];
                    this.$refs.form.resetFields();
                    this.sysParaObj = JSON.parse(JSON.stringify(this.sysParaObj));
                }else {
                    this.queryDetail();
                }
            },
            submitFun(close = true) {
                this.$refs.form.validate(valid => {
                    if(valid) {
                        let paraCascList = this.tableData2.map(item => {
                            return {
                                cId: item.id,
                                paramType: item.paramType
                            }
                        })
                        let params = {
                            id: this.ruleForm.id,
                            name: this.ruleForm.name, // 参数名
                            valStr: this.ruleForm.valStr, // 参数值
                            pTypeLevl: this.ruleForm.pTypeLevl, // 级别
                            orderNum: this.ruleForm.orderNum, // 显示顺序
                            paramType: this.currentNode.code, // 参数分类
                            pTypeName: this.currentNode.name, // 参数分类名称
                            keyString: this.ruleForm.keyString,
                            descr: this.ruleForm.descr,
                            status: this.ruleForm.status,
                            statusName: this.ruleForm.statusName,
                            haveCasc: this.ruleForm.haveCasc, // 是否级联
                            haveDefault: this.ruleForm.haveDefault, // 是否默认
                            paraCascList: this.ruleForm.haveCasc == '1' ? JSON.stringify(paraCascList) : JSON.stringify([]),
                            sysCode: this.treeNode.id
                        }
                        this.loading = true;
                        if(!this.ruleForm.id) {
                            savePara(params).then(res => {
                                if(res.data.code == 1000) {
                                    this.$notify({
                                        title: '提示',
                                        type: 'success',
                                        message: '保存成功！'
                                    })
                                    this.$emit('refresh');
                                    if(close) {
                                        this.closeLayout();
                                    }else {
                                        this.ruleForm.id = '';
                                        this.resetForm();
                                    }
                                }
                                this.loading = false;
                            }).catch(error => {
                                this.loading = false;
                            })
                        }else {
                            editPara(params).then(res => {
                                if(res.data.code == 1000) {
                                    this.$notify({
                                        title: '提示',
                                        type: 'success',
                                        message: '保存成功！'
                                    })
                                    this.$emit('refresh');
                                    if(close) {
                                        this.closeLayout();
                                    }else {
                                        this.ruleForm.id = '';
                                        this.resetForm();
                                    }
                                }
                                this.loading = false;
                            }).catch(error => {
                                this.loading = false;
                            })
                        }
                    }
                })
            },
            queryDetail() { // 明细查询
                queryParaDetail(this.ruleForm.id).then(res => {
                    if(res.data.code == 1000) {
                        let data = res.data.data;
                        if(data) {
                            this.ruleForm.name = data.name;
                            this.ruleForm.valStr = data.valStr;
                            this.ruleForm.pTypeLevl = data.pTypeLevl;
                            this.ruleForm.orderNum = data.orderNum;
                            this.ruleForm.paramType = data.paramType;
                            this.ruleForm.pTypeName = data.pTypeName;
                            this.ruleForm.keyString = data.keyString;
                            this.ruleForm.descr = data.descr;
                            this.ruleForm.status = data.status;
                            this.ruleForm.statusName = data.statusName;
                            this.ruleForm.haveCasc = data.haveCasc;
                            this.ruleForm.haveDefault = data.haveDefault;
                            if(this.ruleForm.haveCasc == '1') {
                                this.queryParaCaseList();
                            }else {
                                this.tableData2 = [];
                            }
                        }
                    }
                })
            },
            queryParaCaseList() { // 反显级联参数
                queryParaCascById(this.ruleForm.id).then(res => {
                    if(res.data.code == 1000) {
                        let data = res.data.data;
                        if(Array.isArray(data)) {
                            this.tableData2 = data.map(item => {
                                return {
                                    ...item,
                                    id: item.cId
                                }
                            })
                        }else {
                            this.tableData2 = [];
                        }
                    }
                })
            },
            getParaCasc(node, resolve) { // 级联参数树 查询
                if(node.level == 0) {
                    let params = {
                        sysId: this.treeNode.id,
                        columns: 'orderNo',
                        orders: 'ASC',
                        typeCode: 'APPLICATION'
                    }
                    queryAppList(params).then(res => {
                        if(res.data.code == 1000) {
                            let data = res.data.data;
                            if(Array.isArray(data)) {
                                data = data.map(item => {
                                    return {
                                        ...item,
                                        nodeType: 'app'
                                    }
                                })
                                resolve([...data])
                            }else {
                                resolve([]);
                            }
                        }
                    }).catch(error => {
                        resolve([])
                    })
                }else if(node.level == 1) {
                    let params = {
                        typeId: 'SYS',
                        moduCode: node.data.id,
                        columns: 'orderNum',
                        orders: 'ASC'
                    }
                    queryParaClass(params).then(res => {
                        if(res.data.code == 1000) {
                            let data = res.data.data;
                            if(Array.isArray(data)) {
                                data = data.map(item => {
                                    return {
                                        ...item,
                                        nodeType: 'paraType'
                                    }
                                })
                                resolve(data);
                            }else {
                                resolve([])
                            }
                        }
                    }).catch(error => {
                        resolve([])
                    })
                }else if(node.level == 2) {
                    let params = {
                        paramType: node.data.code,
                        columns: 'orderNum',
                        orders: 'ASC',
                    }
                    queryParaListAll(params).then(res => {
                        if(res.data.code == 1000) {
                            let data = res.data.data;
                            if(Array.isArray(data)) {
                                data = data.map(item => {
                                    return {
                                        ...item,
                                        leaf: true,
                                        nodeType: 'para'
                                    }
                                })
                                resolve(data)
                            }else {
                                resolve([])
                            }
                        }
                    }).catch(error => {
                        resolve([])
                    })
                }
            },
            paraCascClick(node) {
                if(node.nodeType == 'para') {
                    if(this.tableData2.findIndex(item => item.id == node.id) == -1) {
                        this.tableData2.push(node);
                    }
                }
            },
            deleteParaCasc(row, index) { // 删除级联参数
                this.tableData2.splice(index, 1);
            },
        }
    }

</script>

<style lang='scss' scoped>
   .table-box2 {
        display: flex;
        .left {
            min-width: 200px;
            height: 350px;
            padding: 10px;
            overflow: auto;
        }
        .right {
            flex: 1;
            overflow: hidden;
        }
    }
</style>
